<template>
  <div class="body">
    <div class="main">
      <div class="container">
        <div class="top">
          <img class="header" src="./assets/header.png" />
        </div>
        <div class="content">
          <div class="info">
           
            <nav>
              <button>登录</button>
              <button>注册</button>
            </nav>
          </div>
          <div class="grid">
            <div class="item-holder">
              <div class="item">
                <img src="./assets/smoothie.png" />
                <div class="label">首页</div>
              </div>
            </div>
            <div class="item-holder">
              <div class="item">
                <img src="./assets/grapefruit.png" />
                <div class="label">论坛</div>
              </div>
            </div>
            <div class="item-holder">
              <div class="item">
                <img src="./assets/dessert.png" />
                <div class="label">商城</div>
              </div>
            </div>
            <div class="item-holder">
              <div class="item">
                <img src="./assets/strawberry.png" />
                <div class="label">消息</div>
              </div>
            </div>
            <div class="item-holder">
              <div class="item">
                <img src="./assets/unknown.png" />
                <div class="label">敬请期待</div>
              </div>
            </div>
            <div class="item-holder">
              <div class="item">
                <img src="./assets/icecream.png" />
                <div class="label">敬请期待</div>
              </div>
            </div>
            <div class="item-holder">
              <div class="item">
                <img src="./assets/unknown2.png" />
                <div class="label">敬请期待</div>
              </div>
            </div>
            <div class="item-holder">
              <div class="item">
                <img src="./assets/mysteryfruit.png" />
                <div class="label">敬请期待</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts"></script>
<style scoped>
@import "./css/style.css";
.item {
  transition: transform 0.2s ease-in-out;
  text-transform: uppercase;
  cursor: pointer;
}
.item:hover {
  transform: scale(1.02);
}
</style>
